<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>.:: G.I.O - Gestion de Incidentes Optimiza ::.</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel=StyleSheet href="js/libs/960gs-0/960.css" media="all" type="text/css">
        <script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/libs/handlebars/handlebars.js"></script>
        <script id="user-template" type="text/x-handlebars-template">
            <table border="1">
                <tr>
                    <td>Nombre</td>
                    <td>Apellido</td>
                    <td>Email</td>
                </tr>
            <!--Para cada elemento del array de diccionarios (JSON)-->
            {{#each data}}
                <tr>
                    <!--Obtiene los atributos-->
                    <td>{{nombre}}</td>
                    <td>{{apellido}}</td>
                    <td>{{email}}</td>
                </tr>
            {{/each}}
            <table>

            <select>
            {{#each data}}
                <option value={{id}}>{{nombre}}</option>
            {{/each}}
            </select>

        </script>
        <script>
        $(document).ready(function(){
          //$("button").click(function(){
            //Llamada de ajax, todos nuestras llamadas van a ser iguales
            $.ajax({
                type: "GET",
                url: "http://localhost:8082/optimizaAppWeb/rest/usuario/todos", 
                success: function(data) {

                    var obj = jQuery.parseJSON(data);
                    //le informo a la data obtenida que (mediante handlebars) se agregue en el html                  
                    var userInformation, userTemplateRaw, userTemplateCompiled, userHTML;    
                    userInformation = obj   
                    userTemplateRaw = $("#user-template").html();    
                    userTemplateCompiled = Handlebars.compile(userTemplateRaw);    
                    userHTML = userTemplateCompiled(userInformation);
                    //Escribo en el html
                    $(".result").append(userHTML);
                    
                },
                error: function() {
                    alert("Error: No se pudo realizar la solicitud");
                        
                }
            });
            
          //});
        });
        </script>
                
    </head>
    <body>
        <div id="global">
            <div id="cabezera" style="background-color: #D7012D">
                <img src="images/logoOptimiza.png" height="70" width="320"></img>
            </div>

            <div id="result" class="result" align="center">
                <!--ACA VA EL CONTENIDO DE LA FUNCION HANDLEBARS-->
            </div>

            <div id="pie" style="background-color: #D7012D" align="center">
               <font color="#ffffff">2013 - GIO - Todos los derechos reservados.</font>
           </div>
       </div>
    </body>
</html>
